<script setup>
import { ref } from 'vue'
import { useChatStore } from '@/stores/chat'
import ChatContent from './ChatContent.vue'
import tts from './tts/index.vue'
import { throttle, calculateStartPosition, calculateNewPosition } from '@/utils'

const chatStore = useChatStore()

const props = defineProps({
  client: {
    type: Object,
    required: true
  }
})

const ttsRef = ref()

const startTTS = (text) => {
  ttsRef.value.startTTS(text)
}
const position = ref({ x: 30, y: 30 })
const isDragging = ref(false)
const startPosition = ref({ x: 0, y: 0 })

const pushTime = ref(0)

const startDrag = (e) => {
  pushTime.value = Date.now()

  isDragging.value = true
  startPosition.value = calculateStartPosition(e, position.value)

  window.addEventListener('mousemove', onDrag)
  window.addEventListener('mouseup', stopDrag)
}

const updatePosition = (e) => {
  pushTime.value = 1743384187385
  if (isDragging.value) {
    position.value = calculateNewPosition(e, startPosition.value)
  }
}

const onDrag = throttle(updatePosition, 16)

const boxShow = ref(true)
const stopDrag = () => {
  if (Date.now() - pushTime.value < 300) {
    boxShow.value = !boxShow.value
  }
  isDragging.value = false
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
}

const emit = defineEmits(['toast'])

const toast = (msg) => {
  emit('toast', msg)
}


</script>
<template>
  <div :class="`chat-box ${boxShow} need-zoom`" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }">
    <div class="chat-banner">
      <div class="chat-top" @mousedown="startDrag"></div>
      <div class="hr"></div>
      <div class="left-btn" @click="chatStore.changeType('phone')">
        <img v-if="chatStore.showType === 'phone'" src="../../assets/images/phone-active.png" />
        <img v-else src="../../assets/images/phone.png" />
      </div>
      <div class="left-btn" @click="chatStore.changeType('box')">
        <img v-if="chatStore.showType === 'box'" src="../../assets/images/box-active.png" />
        <img v-else src="../../assets/images/box.png" />
      </div>
      <div class="left-btn" @click="chatStore.changeType('home')">
        <img v-if="chatStore.showType === 'home'" src="../../assets/images/home-active.png" />
        <img v-else src="../../assets/images/home.png" />
      </div>
      <div class="hr"></div>
      <div class="left-btn" @click="chatStore.changeType('ac')">
        <img v-if="chatStore.showType === 'ac'" src="../../assets/images/ac-active.png" />
        <img v-else src="../../assets/images/ac.png" />
      </div>
      <div class="left-btn" @click="chatStore.changeType('battary')">
        <img v-if="chatStore.showType === 'battary'" src="../../assets/images/battary-active.png" />
        <img v-else src="../../assets/images/battary.png" />
      </div>
    </div>
    <chat-content :client="client" @onTts="startTTS" type="phone" v-show="chatStore.showType === 'phone'"></chat-content>
    <chat-content :client="client" @onTts="startTTS" type="box" @toast="toast" v-show="chatStore.showType === 'box'"></chat-content>
    <chat-content :client="client" @onTts="startTTS" type="home" v-show="chatStore.showType === 'home'"></chat-content>
    <chat-content :client="client" @onTts="startTTS" type="ac" @toast="toast" v-show="chatStore.showType === 'ac'"></chat-content>
    <chat-content :client="client" @onTts="startTTS" type="battary" v-show="chatStore.showType === 'battary'"></chat-content>
    <tts ref="ttsRef"></tts>
  </div>
</template>

<style>
.chat-box {
  z-index: 505;
  background-color: #f0f0f0;
  width: 450px;
  height: 600px;
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  &.false{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 19px;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    .chat-banner{
      width: 100px;
      background-color: rgba(0, 0, 0, 0);
      .chat-top{
        width: 100px;
        background-image: url("@/assets/images/hide-chatbox.png");
        background-size: 100px;
        background-position: center;
     }
    }
  }
}

.chat-banner {
  width: 80px;
  background-color: #ddd;
  border-radius: 14px 0 0 14px;
  user-select: none;
  .chat-top{
    height: 100px;
    background-image: url("@/assets/images/chat-logo.png");
    cursor: move;
    background-size: 56px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hr{
    height: 1px;
    background-color: #ccc;
    width: 30px;
    margin: 0 auto;
  }
  .left-btn{
    width: 52px;
    height: 52px;
    margin: 20px auto;
    cursor: pointer;
    border-radius: 52px;
    background-color: #eee;
    img{
      width: 100%;
      height: 100%;
    }
  }
}

.chat-content {
  flex: 1;
}
</style>
